<template>
    <div class="container">
        <div class="wrapper">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="text-align: center">
                    <span style="font-size: 30px;color: #4ab344">登录</span>
                    <!--<el-button style="float: right; padding: 3px 0" type="text" @click="goRegister()">注册</el-button>-->
                </div>
                <div>
                    <el-form ref="form" :model="form" :rules="loginRules" label-width="80px">
                        <el-form-item label="账号：" prop="username">
                            <el-input
                                    v-model="form.username"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="请输入账号"
                            />
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input
                                    v-model="form.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="请输入密码"
                            />
                        </el-form-item>
                        <el-form-item label="验证码" prop="code">
                            <el-input
                                    v-model="form.code"
                                    auto-complete="off"
                                    placeholder="验证码"
                                    style="width: 63%"
                            >
                            </el-input>
                            <div class="login-code">
                                <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                            </div>
                        </el-form-item>
                    </el-form>
                  <el-button
                      :loading="loading"
                      size="medium"
                      type="success"
                      style="width:100%;"
                      @click="handleLogin"
                  >
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                  </el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
    import { getCodeImg,login,setToken } from "@/utils/request";
    import change from "@/utils/change";
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    code: '',
                    uuid: ''
                },
                codeUrl: '',
                loading: false,
                loginRules: {
                    username: [
                        {required: true, trigger: "blur", message: "请输入您的账号"}
                    ],
                    password: [
                        {required: true, trigger: "blur", message: "请输入您的密码"}
                    ],
                    code: [{required: true, trigger: "change", message: "请输入验证码"}]
                },
            };
        },
        methods: {
            // 跳转注册
            goRegister() {
                // 跳转页面
                this.$router.push({path: '/register'})
            },
            getCode() {
                getCodeImg().then(res => {
                    if (true) {
                        this.codeUrl = "data:image/gif;base64," + res.img;
                        this.form.uuid = res.uuid;
                    }
                });
            },
            handleLogin() {
              // this.getCode();
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        login(this.form).then(res => {
                            setToken(res.token)
                          change.$emit('change',true);
                            this.$router.push("/home");
                        }).catch(() => {
                            this.loading = false;
                          this.getCode();
                        })
                    }
                });
            }
        },
        created() {
            this.getCode();
        },
    };
</script>

<style scoped lang="scss">
    .container {
        height: 562px;
        width: 100%;
        background-color: #f4f4f4;
        padding: 1em 0;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 600px;
    }

    .wrapper {
        //padding: 80px 0px 0px 480px;
      margin-top: 5%;
      justify-content: center;
      align-items: center;
      display: flex;
    }
    .login-code {
        width: 33%;
        height: 38px;
        float: right;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .login-code-img {
        height: 38px;
    }
</style>
